<template>
    <div>
        <!--        全屏模式-->
        <div
            :element-loading-text="text"
            class="w-full h-3/4 "
            element-loading-background="rgba(0, 0, 0, 0.8)"
            element-loading-spinner="el-icon-loading"
        >
            <!--            头部区域-->
            <div
                class="flex flex-wrap pt-10 bg-gray-900 text-yellow-300 pb-10 items-center  glow md:flex-row-reverse mb-10">
                <p class="flex w-full justify-center items-center text-3xl text-gray-200 ">
                    商家联盟管理系统
                </p>
                <div class="w-full md:w-1/2 lg:w-5/12 ml-auto md:mr-auto">
                    <img
                        alt="Web development services"
                        class="animate-pulse w-full mx-auto    max-w-xs lg:max-w-sm"
                        src="/static/images/application.svg">
                </div>
                <div class="w-full md:w-1/2 text-center">
                    <h2 class="font-semibold uppercase text-1xl lg:text-2xl text-center pb-5">系统简介
                        <span class="mx-auto w-24 h-1 block mt-1 border-b-2 border-yellow-500"></span>
                    </h2>
                    <p class="w-full md:px-3 lg:px-0 mx-auto mb-5">
                        卡券管理，二次营销管理，商户拓客
                    </p>
                    <span
                        class="relative text-black text-xs bg-white py-3 px-4 rounded-full font-semibold uppercase rise hover:text-black inline-block"
                    >

                    感谢使用
                    </span>
                    <span
                        class="relative text-black text-xs bg-white py-3 px-4 rounded-full font-semibold uppercase rise hover:text-black inline-block"
                    >{{ nowDate }}
                    </span>

                </div>
                <div class="text-sm my-6 ">
                    <p>
                        <el-button type="danger" @click="deployment">一键部署</el-button>
                    </p>
                    <span>
                        本站由后台laravel8框架+mysql5.6数据库+阿里云短信服务集成完成。<br/>
                        后台管理:采用单页面应用vue2+elementUI。<br/>
                        前台页面:由laravel8集成blade模板编写，扩展集成captcha验证码管理，easy-sms短信服务包。<br/>
                        主要扩展包:tailwindcss，wangeditor、dayjs、axios等。

                    </span>
                </div>

            </div>

            <div>
            </div>

        </div>
    </div>
</template>

<script>

export default {
    route: {path: '/', meta: {title: '数据中心'}},
    data() {
        return {
            nowDate: '',
            text: '初始化权限中...',
            show: false,

        }
    },
    mounted() {
        this.currentTime();
        // 模拟请求耗时2s
    },
    methods: {
        deployment() {
            this.initPermission()
        },
        initPermission() {
            const loading = this.$loading({
                lock: true,
                text: this.text,
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(async () => {
                await this.axios.post('admin/permission/init')
                this.show = false
            }, 2000);
        },

        currentTime() {
            setInterval(this.formatDate, 500);
        },
        formatDate() {
            let date = new Date();
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月
            let day = date.getDate(); // 日
            let week = date.getDay(); // 星期
            let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            let hour = date.getHours(); // 时
            hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
            let minute = date.getMinutes(); // 分
            minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
            let second = date.getSeconds(); // 秒
            second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
            this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
        },
    },

// 销毁时清除计时器
// 销毁定时器
    beforeDestroy() {
        if (this.formatDate) {
            clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
        }
    }

}
</script>

<style lang="scss">
.dv-full-screen {
    background-color: #000;
    color: white;
}
</style>
